Siti web su misura
Architetture leggere, performanti, accessibili. Niente builder, niente template generici.
Scopri →Il wordmark WAVE è composto da centinaia di celle colorate — un mosaico digitale, una vetrata contemporanea. Ogni lettera è attraversata da una scala cromatica che parte dal cobalto e arriva al violetto, passando per ciano, teal, lime, ambra, arancio, rosa.
Da questa scelta nasce tutto il sistema: la palette è uno spettro (non un singolo accent), la tipografia è slab (calda, geometrica), il ritmo è editoriale, e le celle del mosaico tornano come pattern decorativo nei componenti.
Dieci tinte ordinate sullo stesso asse del logo (sx → dx). Sono usate come spettro: scegliamo quale fascia chiamare in causa a seconda della sezione, evitando i mix random. Le tinte hanno saturazione alta — vanno dosate con superfici neutre.
La striscia spettro come marker di marchio: separatore di sezioni, firma di footer, badge "wave inside".
Il display è disponibile in tre interpretazioni (vedi pannello Tweaks): Roboto Slab di default, Zilla Slab per toni più editoriali, Alfa Slab One per dichiarazioni brutaliste.
Scala 4-based. La spaziatura è una variabile compositiva: dosaggi grandi (s-12, s-16, s-24) per il respiro editoriale, piccoli (s-1, s-2) per micro-relazioni.
Le celle del logo diventano un alfabeto di forme: quadrati arrotondati, proporzione 1:1, palette spettrale. Le usiamo come tile, badge, copertine, divisori, accents.
Stroke 1.5, angoli arrotondati, weight uniformi. Quattro size: is-sm 16, default 20, is-lg 28, is-xl 40. Hover: tile rota, icona vira ambra.
Grid a 12 colonne, gutter scalabile, contenitore con max 1280px. Tre fasce: mobile fino a 700px, tablet 700-900, desktop oltre.
| Breakpoint | Min-width | Layout | Container | Gutter |
|---|---|---|---|---|
| Mobile | — · 700 | 1 colonna | fluido | 16 |
| Tablet | 700 | 2/3 colonne | fluido | 24 |
| Desktop | 900 | griglia 12 | 1280 | 32 |
| Large | 1440 | griglia 12 | 1440 | 40 |
Il marchio respira. Rispettare clear-space (1× altezza M), dimensione minima 24px, no distorsioni, no monocromia random.
Voce: chiara, calda, mai accademica. Tono: editoriale, diretto, con leggerezza. Italiano colloquiale ma preciso. Eviare il gergo, far respirare il testo. Mai shoutcase, raramente esclamazioni.
Il toggle in alto a destra cambia data-theme
sul <html>. Tutti i token si ribaltano automaticamente.
I colori spettro restano gli stessi: cambia solo paper ↔ ink.
Card a sé per il consenso GDPR, termini, newsletter. La barra colorata a sinistra si disegna verticalmente quando il box è attivo. Lo svg dentro al checkbox usa stroke-dashoffset per disegnarsi.
Ogni controllo accetta data-c="..." per assumere il tono giusto al contesto. Click per vedere l'animazione di entrata/uscita: pop, burst, draw-in.
Architetture leggere, performanti, accessibili. Niente builder, niente template generici.
Scopri →Dalla strategia al checkout. Headless, custom o WooCommerce: scegliamo lo stack giusto.
Scopri →Posizionamento tecnico e contenuti. Risultati misurabili, rapporti trasparenti.
Scopri →Una guida pratica per capire INP, LCP e cosa fare prima che il traffico ne risenta.
Leggi · 8 min →Perché stiamo vedendo un ritorno al codice pulito, e cosa significa per chi commissiona un sito.
Leggi · 6 min →Come abbiamo integrato l'AI nel processo editoriale senza perdere voce.
Leggi · 10 min →Sito vetrina fino a 6 pagine. Per professionisti e piccole attività.
Sito corporate o portfolio, fino a 20 pagine. Per aziende con ambizioni.
Progetti complessi, e-commerce, integrazioni. Un preventivo per ogni storia.
Hanno ascoltato prima di proporre. Non capita spesso. Il sito che ne è uscito è esattamente quello che cercavamo da anni.
Squadra rara: tecnici veri ma con sensibilità grafica. Ci hanno fatto risparmiare scelte sbagliate.
| Servizio | Categoria | Tempistica | Investimento | ROI medio |
|---|---|---|---|---|
| Sito vetrina | Sviluppo | 4-6 settimane | €2.500 | +38% |
| E-commerce | Sviluppo | 8-12 settimane | €15.000 | +62% |
| SEO continuativa | Marketing | 6+ mesi | €1.200/mo | +74% |
| Strategia social | Comunicazione | Annuale | €800/mo | +22% |
Il pattern firma del brand. Da usare come hero alternativo, divisore di sezione, copertina di card o sfondo di stati vuoti. Le celle si possono animare in stagger per un effetto "vetrata che si compone".
Sezioni che scattano in posizione mentre scorri — verticali (pannelli a tutto schermo) o orizzontali (rail di card/screen). Native CSS, nessuna libreria, supporto su tutti i browser moderni.
Capire prima di fare. Brief, vincoli, obiettivi.
Architettura, contenuti, KPI.
Wireframe, prototipi, design system.
Sviluppo, integrazioni, performance.
SEO, analisi, ottimizzazione continua.
Layout split: a sinistra l'accordion editoriale, a destra un pannello scuro con contatore enorme e un'animazione che cambia in sync con l'item attivo. Single-open: aprire un item chiude gli altri. Il contatore "flippa" con un blur, l'animazione si riavvia. Funziona per il metodo, FAQ animate, feature breakdown, packages.
Cerchio o quadrato, con immagine o iniziali. 5 size (xs/sm/md/lg/xl), 8 colori spettro, badge di stato (online · away · off). In gruppo si espandono al hover come un mazzo di carte.
Tre stati: hint (default), success (lime), error (rose) con animazione shake al submit fallito. Counter di caratteri opzionale.
Tooltip: ink scuro, pop con scale spring. Popover: card più ricca con titolo e body. Entrambi con animazione su attivazione.
Risposta entro 24 ore. Niente bot, niente form complicati: solo email diretta a noi.
Il wordmark è composto da centinaia di celle colorate — un mosaico digitale, vetrata contemporanea.
Menu custom con icone, kbd shortcut e divider. Items entrano in stagger.
Multi-step form, checkout, onboarding. Step done in lime, current con pulse ring. Click su uno step per saltare. Variante verticale per sidebar lunghe.
Search bar a pill, espandibile, con autocomplete dropdown. Filtra in tempo reale, supporta keyboard nav.
Drag & drop reale. Icona morpha al hover/drag, lista file appare sotto con slide-in editoriale.
Quattro varianti: info, success, warning, error. Barra colorata verticale che si disegna all'apparire, slide-out al dismiss.
Slide-up dal basso con striscia spettro in alto. Persiste la scelta in localStorage. Clicca il bottone per riaprirlo.
Apri con ⌘ K (Mac) o Ctrl K (PC). Filtraggio istantaneo, navigazione con frecce, invio per aprire. Scrim con backdrop blur.
Stati vuoti con illustrazione che "respira" e copy editoriale. 404 con cifre che fluttuano in palette spettro.
Stiamo preparando i prossimi case study. Torna fra qualche giorno.
L'URL che cercavi non esiste più, o forse non è mai esistito.
Header completo del sito: topbar scura con social + WhatsApp + CTA, nav principale paper con logo e link, megamenu split (voci a sinistra, immagine + testo a destra) per Chi siamo e Servizi. Click o hover su un item con freccia per aprire. ESC o click fuori per chiudere. Passa il mouse sulle voci di sinistra per vedere la slide di destra cambiare.
Per le pagine "metodo" e "chi siamo": un visual sticky che cambia stato mentre la colonna testo scorre. Scrolla per provare.
Workshop di discovery: obiettivi, audience, vincoli. Niente brief copia-incolla.
Wireframe, prototipi, design system. Decisioni prese a tavolino, non in produzione.
Codice pulito, performance da 95+, accessibilità in mente fin dal primo commit.
Post-launch: misurazione, SEO, content. Il sito è l'inizio, non la fine.
Quattro tempi, una stessa onda.
Carosello di schermate del sito/app come pattern di showcase: ampie, a tutto schermo, navigabili con trackpad, tasti freccia o frecce in alto. Ogni scheda è uno snap-stop.
Opt-in: con un attributo su <html data-page-snap="on">
l'intera pagina scatta tra le sezioni principali. Attivalo dal pannello
Tweaks e prova a scorrere — disattivalo per la lettura editoriale.
Placeholder editoriali per i contenuti che entreranno in produzione: fotografie, video, animazioni Rive, Lottie e render 3D. Tag in monospace in alto a sinistra, proporzione in basso a destra, strisce a 45° col tono del media. Si sostituiscono con <img>, <video> o <canvas data-rive>.
Otto rapporti predefiniti via data-ratio. Le proporzioni rispettano la griglia editoriale: 16:9 per hero, 4:5 per ritratti, 1:1 per griglie, 21:9 per banner, 9:16 per stories.
Tag dedicati per ciascun formato di animazione. Colori spettro: Rive viola, Lottie rosa, Motion ciano, 3D teal.
L'animazione Rive a destra reagisce al cursore. Stato idle → hover → click.
Costruiamo identità che si muovono. Ogni scelta visiva nasce da una conversazione, e l'animazione entra in scena per amplificare un'idea — mai per decorare.
<div class="w-media" data-ratio="4/5">
<img src="hero.jpg" alt="..."
style="position:absolute;
inset:0; width:100%;
height:100%;
object-fit:cover;">
</div>
<div class="w-media" data-ratio="1/1"
data-spectrum>
<canvas data-rive
data-src="wave.riv"
data-sm="State"
style="position:absolute;
inset:0;width:100%;
height:100%">
</canvas>
</div>
Raccontaci la tua idea. Ti rispondiamo entro 24 ore con un primo punto di vista — gratis, sincero, mirato.
Card persona: foto placeholder con iniziali (in attesa delle foto vere), ruolo in alto, nome editoriale. Hover ruota la foto.
Spina dorsale verticale con gradient spettro. I dot pulsano al hover. Usalo per il metodo, la storia dell'agenzia, milestone di un progetto.
Apriamo lo studio a Firenze in due persone, una stanza, un caffè troppo lungo.
Lanciamo il nostro primo headless store. Da lì cambia tutto.
Siamo in 8. Apriamo una seconda base operativa in zona Tortona.
Festeggiamo il centesimo progetto. Continuiamo a non avere un PM.
Pubblichiamo il design system pubblico. Quello che stai sfogliando.
Comparativa feature-by-feature. Colonna featured (Studio) in scuro con prezzo ambra. Check in lime, cross in grigio.
| Presenza €2.500 | Crescita €6.800 | Su misura Da richiesta | |
|---|---|---|---|
| Pagine | Fino a 6 | Fino a 20 | Illimitate |
| Design system dedicato | |||
| SEO on-page | Base | Tecnica + 6 contenuti | Strategia annuale |
| Integrazione CRM | |||
| Hosting primo anno | |||
| Support post-launch | 30 giorni | 3 mesi | Continuativo |
| Workshop di discovery | |||
| Roadmap dedicata |
Tre livelli di footer: mini (solo link + copyright), standard (3 colonne) e mega (titolo gigante + 4 colonne + striscia spettro).
Layout completo: prefooter con CTA gigante e gradient glow animato, striscia spettro divisoria, main 4 colonne (brand · menu · servizi · contatti + social), sub footer privacy/cookie/sitemap, sub-sub legal con dati fiscali.
Pagina dedicata ai servizi di sviluppo siti e shop online.
Apri → P.02 · ServizioPagina dedicata al posizionamento e alla visibilità sui motori AI.
Apri → P.03 · ServizioPagina dedicata alla gestione social e content marketing.
Apri →I 168 token CSS in tre formati: variabili native, SCSS map, Tailwind config. Copia con un click.
:root {
/* SPECTRUM */
--c-cobalt: #1E3A8A;
--c-blue: #2563EB;
--c-sky: #0EA5E9;
--c-cyan: #06B6D4;
--c-teal: #14B8A6;
--c-lime: #84CC16;
--c-amber: #FACC15;
--c-orange: #F97316;
--c-rose: #F43F5E;
--c-violet: #A855F7;
/* INK / PAPER */
--ink: #0E0E10;
--bg: #FAFAFA;
/* TYPE */
--font-display: 'Roboto Slab', serif;
--font-body: 'Manrope', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* SPACING (4-based) */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-6: 1.5rem;
--s-8: 2rem;
--s-12: 3rem;
--s-16: 4rem;
--s-24: 6rem;
}
Esempi di assemblaggio: come comporre più componenti del sistema in un pattern reale. Markup completo, pronto da copiare.
Aggiunti: avatar, tooltip, popover, dropdown, breadcrumb, pagination, stepper, search, dropzone, alert, cookie banner, ⌘K palette, empty/404. Pattern: newsletter, contact, team, timeline, pricing comparison, footer mini & mega. Sezione dev/handoff.
Libreria 12 entry animations, sistema .w-media per immagini/video/Rive, accordion coordinato con counter, checkbox/radio grafiche con burst.
Rebrand sullo spettro mosaico. Tipografia slab, palette 10 colori, marchio composto da celle.
Prima versione: tokens, type system, componenti base (button, input, card).
Raccontaci la tua idea. Ti rispondiamo entro 24 ore con un primo punto di vista.